<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel=stylesheet href="css/jquery.calendarPicker.css" type="text/css" media="screen">
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.calendarPicker.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>

<link rel="stylesheet" type="text/css" href="css/flexigrid.css">
<script type="text/javascript" src="js/flexigrid.js"></script>
<title>查询页面 http://flexigrid.info/</title>
</head>
<body>
	<a href="newTest.html">new test</a>
	<table border="1px" cellpadding="0" cellspacing="0" bordercolor="#616D7E">
		<tr>
			<td style="width: 120px">查询开始日期</td>
			<td style="width: 180px"><span id="start" /></td>
			<td style="width: 120px">查询结束日期</td>
			<td style="width: 180px"><span id="end" /></td>
		</tr>
		<tr>
			<td colspan="2">
				<div id="startDiv" style="width: 200px"></div>
			</td>
			<td colspan="2">
				<div id="endDiv" style="width: 200px"></div>
			</td>
		</tr>
	</table>
	<input class="sumbit" type="button" value="查询">

	<table id="resultList" border="1px" cellpadding="0" cellspacing="0" bordercolor="#616D7E">
	</table>

	<script type="text/javascript">
		jQuery(function() {
			jQuery('.sumbit').click(
					function() {
						jQuery.getJSON('jqueryAjax', function(data) {
							analysisData(data);
						});
					});
		});

		function analysisData(data) {
			var items = [];
			var result='';
			var keywords = data.groups[0].keywords;
			result+='<tr><td>'
				+'</td><td colspan="2">Revenue</td>'
				+'<td colspan="2">Searches</td>'
				+'<td colspan="2">Impressions</td>'
				+'<td colspan="2">User Registration</td>'
				+'<td colspan="2">Orders</td>'
				+'<td colspan="2">Clicks</td></tr>';
			result+='<tr><td>'+data.groups[0].groupName+'</td>'+
			'<td colspan="2">'+data.groups[0].totalCost+' '+data.groups[0].totalPageView+'</td>'+
			'<td colspan="2">'+data.groups[0].totalImpression+'</td>'+
			'<td colspan="2">'+data.groups[0].totalRegistration+'</td>'+
			'<td colspan="2">'+data.groups[0].totalSessionDuration+'</td>'+
			'<td colspan="2">'+data.groups[0].totalNumberOfOrder+' '+data.groups[0].totalOrderExtRetail+'</td>'+
			'<td colspan="2">'+data.groups[0].totalClick+'</td></tr>';
					
			result+='<tr><td>keyword</td><td>sessionDuration</td><td>'
					+'pageView</td><td>'
					+'registrations</td><td>'
					+'numberOfOrder</td><td>'
					+'orderExtRetail</td><td>'
					+'impression</td><td>'
					+'click</td><td>'
					+'cost</td><td>'
					+'ctr(Click/Impression)</td><td>'
					+'cpc(Click/Cost)</td><td>'
					+'roas</td><td>'
					+'epg</td><td>'
					+'revPerOrder</td></tr>';	
					
			for ( var i = 0; i < keywords.length; i++) {
				result+='<tr><td>'+keywords[i].keyword+'</td><td>'
				+keywords[i].sessionDuration+'</td><td>'
				+keywords[i].pageView+'</td><td>'
				+keywords[i].registrations+'</td><td>'
				+keywords[i].numberOfOrder+'</td><td>'
				+keywords[i].orderExtRetail+'</td><td>'
				+keywords[i].impression+'</td><td>'
				+keywords[i].click+'</td><td>'
				+keywords[i].cost+'</td><td>'
				+keywords[i].ctr+'</td><td>'
				+keywords[i].cpc+'</td><td>'
				+keywords[i].roas+'</td><td>'
				+keywords[i].epg+'</td><td>'
				+keywords[i].revPerOrder+'</td></tr>';		
			}

			jQuery('#resultList').html(result);
			jQuery('#resultList').flexigrid(
					{usepager: true,
						title: '查询结果',
						useRp: true,
						rp: 15,
						showTableToggleBtn: true,
						width: 1450,
						height: 500
					});
		}
		var startCalendarPicker = jQuery("#startDiv").calendarPicker({
			years : 1,
			months : 2,
			days : 3,
			showDayArrows : false,
			callback : function(cal) {
				jQuery("#start").html(cal.currentDate.toISOString());
			}
		});

		var endCalendarPicker = jQuery("#endDiv").calendarPicker({
			years : 1,
			months : 2,
			days : 3,
			showDayArrows : false,
			callback : function(cal) {
				jQuery("#end").html(cal.currentDate.toISOString());
			}
		});
	</script>
</body>
</html>